﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jQuery UI-jQuery实践</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="res/css/bootstrap.min.css" rel="stylesheet"/>
<link href="jquery-ui.css" rel="stylesheet"/>
<link href="res/css/zico.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>   
<script src="jquery-ui.js"></script>
<script src="res/js/popper.min.js"></script>
<script src="res/js/bootstrap.min.js"></script>
<style>
img{width:100%;}
.odd{background: #f00;}
.even{background:#ccc;}
</style>
</head>
<body>
<div class="container-xl a1">
<h1>jQuery UI</h1>

</div>

<div class="container-xl">
<div id="slider"></div>
<div id="date"></div>


<input type="text" id="date2"/>
<select name="format" id="format">
<option value="mm/dd/yy">mm/dd/yyy格式</option>
<option value="yy-mm-dd">yyyy-mm-dd格式</option>
<option value="d M,y">短日期格式 -d M , y</option>
<option value="DD,d MM,yy">长日期格式：- DD,d MM,yy</option>
</select>


<script>
$(function () {
    $(`#slider`).slider();
    $(`#date`).datepicker();
    $(`#date2`).datepicker({
        showButtonPanel:true,
        numberOfMonths:2,
        changeMonth:true,
        changeYear:true,
        showWeek:true,
        firstDay:1
    })
    $(`#format`).change(function () {
        $(`#date2`).datepicker("option","dateFormat",$(this).val());
    })



})

</script>
</body>
</html>
